<%- include('css') %>
<style>
    .layui-row{
        margin-bottom: 10px;
    }
    .grid-demo label{
        font-size: 16px;font-family: Consolas;
        color:grey;
    }
    .grid-demo span{
        font-size: 18px;font-family: Consolas
    }
</style>
<div id="app" style="width:980px">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>订单详情</legend>
    </fieldset>

    <div class="layui-container">
        <div class="layui-row" style="">
            <div class="layui-row">
                <div class="layui-col-xs4">
                    <div class="grid-demo grid-demo-bg1">
                        <label>订单编号：</label><span v-text="order.number"></span>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="grid-demo">
                        <label>订单人：</label><span v-text="order.realname"></span>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="grid-demo">
                        <label>订单状态：</label>
                        <span v-text="status[order.status]"></span>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs4">
                    <div class="grid-demo grid-demo-bg1">
                        <label>分配门店：</label><span v-text="order.storename"></span>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="grid-demo">
                        <label>分配业务员：</label><span v-text="order.staffname"></span>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="grid-demo">
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs8">
                    <div class="grid-demo grid-demo-bg1">
                        <label>订单地址：</label><span v-text="order.province+ ' ' +order.address"></span>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="grid-demo">
                        <label>联系手机：</label><span v-text="order.phone"></span>
                    </div>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>投诉状况</legend>
            </fieldset>
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <div class="grid-demo grid-demo-bg1">
                        <label>是否投诉：</label><span v-text="complaint[order.is_complaint]"></span>
                    </div>
                </div>
            </div>
            <div class="layui-row" v-if="order.is_complaint != '0'">
                <div class="layui-col-xs12">
                    <div class="grid-demo grid-demo-bg1">
                        <label>投诉描述：</label><span v-text="order.complaint"></span>
                    </div>
                </div>
            </div>
            <div class="layui-row" v-if="order.is_complaint != '0'">
                <div class="layui-col-xs12">
                    <div class="grid-demo grid-demo-bg1">
                        <label>投诉图片：</label>
                            <image v-for="item in order.complaint_pic" :src="item" style="margin-left: 10px;width: 80px;height: 80px;"/>
                    </div>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>投诉处理</legend>
            </fieldset>
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <div class="grid-demo grid-demo-bg1">
                        <label>是否处理：</label><span v-text="order.is_complaint == '2' ? '是' : '否'"></span>
                    </div>
                </div>
            </div>
            <div class="layui-row" v-if="order.is_complaint == '2'">
                <div class="layui-col-xs12">
                    <div class="grid-demo grid-demo-bg1">
                        <label>处理回复：</label><span v-text="order.replay"></span>
                    </div>
                </div>
            </div>
            <div class="layui-row" v-if="order.is_complaint == '2'">
                <div class="layui-col-xs12">
                    <div class="grid-demo grid-demo-bg1">
                        <label>处理图片：</label>
                        <image v-for="item in order.replay_pic" :src="item" style="margin-left: 10px;width: 80px;height: 80px;"/>
                    </div>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>订单评价</legend>
            </fieldset>
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <div class="grid-demo grid-demo-bg1">
                        <label>是否已完成：</label><span v-text="order.status == '12' ? '是' : '否'"></span>
                    </div>
                </div>
            </div>
            <div class="layui-row" v-if="order.status == '12'">
                <div class="layui-col-xs12">
                    <div class="grid-demo grid-demo-bg1">
                        <label>评星：</label><span v-text="order.rete"></span>
                    </div>
                </div>
            </div>
            <div class="layui-row" v-if="order.status == '12'">
                <div class="layui-col-xs12">
                    <div class="grid-demo grid-demo-bg1">
                        <label>评价内容：</label><span v-text="order.evaluation"></span>
                    </div>
                </div>
            </div>
            <div class="layui-row" v-if="order.status == '12'">
                <div class="layui-col-xs12">
                    <div class="grid-demo grid-demo-bg1">
                        <label>评价图片：</label>
                        <image v-for="item in order.evaluation_pic" :src="item" style="margin-left: 10px;width: 80px;height: 80px;"/>
                    </div>
                </div>
            </div>

            <hr class="layui-bg-black">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" v-on:click="doclose" class="layui-btn layui-btn-primary">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

<%- include('script') %>

<script>

    var vm = new Vue({
        el: '#app',
        data:function(){

            return {
                id:'',
                isButtonDisabled:false,
                order:'',
                status:['已付款','已分配门店','已分配业务员','业务员已取衣','业务员正在送洗','已送达中心','中心清洗中','已上挂','业务员已领取','业务员已取回','等待取衣','已确认','已结束'],
                complaint:['无投诉','已投诉','已处理']
            }

        },
        mounted:function(){

            var self = this;

            self.id = '<%=id%>';
            $.get(
                '/admin/order/'+self.id,
                function(rs){
                    if(rs.code == '200' ){
                        self.order = rs.data;
                    }else{
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                        parent.layer.msg('获取数据失败：'+res.error+' -- '+res.code,{icon:2});
                    }
                }
            )

        },

        methods:{

            doclose:function(){
                parent.vm.iframeclose();
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            }

        }
    })




</script>
